<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside :width="asideFold ? '60px' : '200px'" class="el_aside">
        <Aside :isCollapse="asideFold"></Aside>
      </el-aside>
      <el-container>
        <el-header class="el_header">
          <Header @changeFold="changeFold"></Header>
        </el-header>
        <el-main class="el_main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Aside from '@/layout/nav-aside/aside.vue';
import Header from '@/layout/nav-header/header.vue';

export default defineComponent({
  name: 'main',
  components: { Aside, Header },
  setup() {
    const asideFold = ref<boolean>(false);
    const changeFold = (val: boolean) => {
      asideFold.value = val;
    };
    return {
      asideFold,
      changeFold
    };
  }
});
</script>

<style scoped lang="less">
.common-layout {
  .container {
    width: 100%;
    height: 100%;
  }

  .el-header {
    background-color: #ffffff;
    height: 40px;
  }

  .el_aside {
    background-color: #545c64;
    height: 100vh;
    transition: all 0.2s cubic-bezier(0, 0, 0, 1.03);
  }

  .el-main {
    background-color: #f8f8f8;
    height: calc(100vh - 60px);
  }
}
</style>
